<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑部门 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/department-edit.css}">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="department-edit-container">
        <!-- 返回按钮 -->
        <div class="back-container">
            <a th:href="@{/department/view/{id}(id=${department.departmentID})}" class="btn btn-back">← 返回部门详情</a>
            <a th:href="@{/department}" class="btn btn-back">← 返回部门列表</a>
        </div>

        <!-- 页面标题 -->
        <div class="module-header">
            <h1 class="module-title">编辑部门信息</h1>
        </div>

        <!-- 编辑表单 -->
        <form th:action="@{/department/edit/{id}(id=${department.departmentID})}" method="post" class="edit-form">
            <!-- 基本信息区 -->
            <div class="form-section">
                <h2 class="section-title">基本信息</h2>
                <div class="form-grid">
                    <div class="form-group">
                        <label for="departmentName">部门名称</label>
                        <input type="text" id="departmentName" name="departmentName"
                               th:value="${department.departmentName}" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="departmentCode">部门代码</label>
                        <input type="text" id="departmentCode" name="departmentCode"
                               th:value="${department.departmentCode}" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="departmentParentID">上级部门</label>
                        <select id="departmentParentID" name="departmentParentID" class="form-control">
                            <option value="">无上级部门</option>
                            <option th:each="parent : ${availableParents}"
                                    th:value="${parent.departmentID}"
                                    th:text="${parent.departmentName}"
                                    th:selected="${department.departmentParentID != null && department.departmentParentID.departmentID == parent.departmentID}">
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="departmentHeadID">部门负责人</label>
                        <select id="departmentHeadID" name="departmentHeadID" class="form-control">
                            <option value="">无负责人</option>
                            <!-- 这里需要通过AJAX加载，简化版先留空 -->
                        </select>
                    </div>
                </div>
            </div>

            <!-- 部门介绍区 -->
            <div class="form-section">
                <h2 class="section-title">部门介绍</h2>
                <div class="form-group">
                    <textarea id="departmentIntroduction" name="departmentIntroduction"
                              class="form-control introduction-textarea"
                              th:text="${department.departmentIntroduction}"></textarea>
                </div>
            </div>

            <!-- 表单操作按钮 -->
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">保存更改</button>
                <button type="button" class="btn btn-cancel" onclick="history.back()">取消</button>
            </div>
        </form>
    </main>
</div>
<script th:src="@{/js/department-edit.js}"></script>
</body>
</html>